<template>
  <!-- 文章列表 -->
  <div class="article-list">
    <!-- 文章列表 -->
    <div v-if="articles.length > 0" class="article-grid">
      <div v-for="article in articles" 
           :key="article.articleId" 
           class="article-card"
           @click="goArticleDetail(article.articleId)">
        <img v-if="article.cover" :src="article.cover" class="article-cover" alt="文章封面">
        <div class="article-content">
          <h2 class="article-title">{{ article.title }}</h2>
          <p class="article-description">{{ article.description }}</p>
          <div class="article-meta">
            <span class="meta-item">
              <i class="far fa-calendar"></i>
              {{ article.createTime }}
            </span>
            <span class="meta-item">
              <i class="far fa-eye"></i>
              {{ article.readNum }} 阅读
            </span>
          </div>
          <div class="tag-list">
            <span v-for="tag in article.tags" 
                  :key="tag.tagId" 
                  class="tag-item"
                  @click.stop="goTagArticleListPage(tag.tagId, tag.name)">
              {{ tag.name }}
            </span>
          </div>
        </div>
      </div>
    </div>

    <!-- 空状态 -->
    <div v-else class="empty-state">
      <p class="empty-text">暂无文章</p>
    </div>

    <!-- 分页 -->
    <div v-if="total > 0" class="pagination">
      <div class="page-list">
        <span class="page-link" 
              :class="{ disabled: current === 1 }"
              @click="current > 1 && getArticles(current - 1)">上一页</span>
        <span v-for="page in pages" 
              :key="page"
              class="page-link"
              :class="{ active: current === page }"
              @click="getArticles(page)">
          {{ page }}
        </span>
        <span class="page-link" 
              :class="{ disabled: current === pages }"
              @click="current < pages && getArticles(current + 1)">下一页</span>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, watch } from 'vue'
import { getArticleList } from '@/api/frontend/article'
import { useRouter } from 'vue-router'

const router = useRouter()

const props = defineProps({
  categoryId: {
    type: String,
    default: ''
  },
  tagId: {
    type: String,
    default: ''
  }
})

const articles = ref([])
const current = ref(1)
const total = ref(0)
const size = ref(2)
const pages = ref(0)

// 获取分页数据
function getArticles(currentNo) {
  const params = {
    current: currentNo,
    size: size.value
  }
  
  // 根据props添加对应的查询参数
  if (props.categoryId) {
    params.categoryId = props.categoryId
  }
  if (props.tagId) {
    params.tagId = props.tagId
  }

  getArticleList(params).then((res) => {
    if (res.success) {
      articles.value = res.data.records
      current.value = res.data.current
      total.value = res.data.total
      size.value = res.data.size
      pages.value = res.data.pages
    }
  })
}

// 跳转到文章详情页
const goArticleDetail = (articleId) => {
  router.push({ path: `/article/${articleId}` })
}

// 跳转到标签文章列表页
const goTagArticleListPage = (tagId, name) => {
  router.push({ path: `/tag/list/${tagId}/${name}` })
}

// 监听props变化，重新获取数据
watch([() => props.categoryId, () => props.tagId], () => {
  current.value = 1
  getArticles(1)
})

// 初始加载
getArticles(1)
</script>

<style scoped>
/* 文章列表样式 */
.article-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.article-card {
  display: flex;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 0;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  cursor: pointer;
  padding: 1rem;
  height: 120px;
  margin: 0.5rem 0;
}

.article-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-color: #d1d5db;
}

.article-cover {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 0;
  margin-right: 1rem;
}

.article-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  padding: 0;
}

.article-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.article-title:hover {
  color: #2563eb;
}

.tag-list {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.tag-item {
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.75rem;
  background: #ecfdf5;
  color: #047857;
  font-size: 0.75rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.tag-item:hover {
  background: #d1fae5;
  transform: translateY(-1px);
}

.article-description {
  display: none;
}

.article-meta {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  color: #6b7280;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* 分页样式 */
.pagination {
  margin: 2.5rem 0;
}

.page-list {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
}

.page-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 0;
  background-color: #f3f4f6;
  color: #4b5563;
  cursor: pointer;
  transition: all 0.2s ease;
}

.page-link:hover {
  background-color: #e5e7eb;
  transform: translateY(-1px);
}

.page-link.active {
  background-color: #2563eb;
  color: white;
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .article-card {
    background-color: #1f2937;
    border-color: #374151;
  }

  .article-title {
    color: #e5e7eb;
  }

  .article-description {
    color: #9ca3af;
  }

  .tag-item {
    background: #374151;
    color: #10b981;
  }

  .tag-item:hover {
    background: #4b5563;
  }
}
</style>
